<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <uni-nav-bar
      @clickLeft="goBack"
      left-icon="back"
      leftIcon="arrowleft"
      title="选择地址"
      statusBar="true"
      fixed="true"
      color="#000000"
      backgroundColor="#ffffff"
    ></uni-nav-bar>

    <!-- 表单区域 -->
    <view class="form-section">
      <!-- 收件人 -->
      <view class="form-item">
        <text class="label">收件人</text>
        <input type="text" v-model="address.consignee" />
      </view>

      <!-- 联系电话 -->
      <view class="form-item">
        <text class="label">联系电话</text>
        <view class="phone-input">
          <view class="area-code">
            <text>+86</text>
            <text class="arrow">></text>
          </view>
          <input type="number" v-model="address.phone" />
        </view>
      </view>

      <!-- 所在地区 -->
      <view class="form-item">
        <text class="label">所在地区</text>
        <view class="region-select">
          <text>四川省 雅安市 雨城区 东城街道</text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 收货地址 -->
      <view class="form-item">
        <text class="label">收货地址</text>
        <input type="text" v-model="address.detail" />
      </view>

      <!-- 门牌号 -->
      <view class="form-item">
        <text class="label">门牌号</text>
        <input type="text" placeholder="门牌号码（选填）" placeholder-class="placeholder" />
      </view>

      <!-- 邮编 -->
      <view class="form-item">
        <text class="label">邮编</text>
        <input type="number" placeholder="邮政编码（选填）" placeholder-class="placeholder" />
      </view>

      <!-- 微信导入按钮 -->
      <view class="wechat-import" @click="addressFromWx()">
        <image src="/static/wechat_1.png" class="wechat-icon"></image>
        <text class="wechat-text">从微信获取新地址</text>
      </view>
    </view>

    <!-- 地址标签 -->
    <view class="tag-section">
      <text class="section-title">识别地址</text>
      <view class="arrow">></view>
    </view>

    <!-- 默认地址设置 -->
    <view class="default-section">
      <text class="section-title">设为默认地址</text>
      <switch class="switch" color="#ff0000" />
    </view>

    <!-- 删除按钮 -->
    <view class="delete-section" @click="deleteAddress()" >
      <text class="delete-btn" v-if="edit === true">
         <text class="delete-icon">🗑</text>
        删除地址信息
      </text>
	  <text class="delete-btn" v-else>
	     <text class="delete-icon"></text>
	  </text>
    </view>

    <!-- 底部保存按钮 -->
    <view class="bottom-btn" @click="callAddAddressBook()">保存</view>
  </view>
</template>


<script src="./index.js"></script>
<style src="./index.scss" lang="scss" scoped></style>
<style scoped>
/* #ifdef MP-WEIXIN || APP-PLUS */
::v-deep ::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

/* #endif */
</style>
